	* {
            margin: 0;
            padding: 0;
        } 
	li {
		list-style: none;
	}
	form a {
		text-decoration: none;
	}
	html, body {
		
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
	}
	.wrapper {
		text-align: center;
	}
	.header {
		font-size: 25px;
		font-family: "Microsoft YaHei UI";
		color: rgb(98, 94, 91);
	}
	.header span {
		font-size: 45px;
		font-family: "Brush Script Std";
	}
	form {
	    /* background-image: url(../img/input-bg.png); */
		width: 270px;
		height: 260px;
		margin: 35px auto;
		padding: 30px;
		box-shadow: 0px 1px 2px 1px #aaaaaa,
		inset 0px 1px 1px rgba(255, 255, 255, 0.7);
		bordor-radius: 3px;
	}
	form ul {
		width: 100%;
		height: 100%;
		text-align: left;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
	}
	ul li div {
		width: 270px;
		height: 40px;
		background: #e1dcd8;
		color: rgb(98, 94, 91);
		box-shadow: inset 0px 2px 5px #aaaaaa;
		border-radius: 5px;
		position: relative;
	}
	ul li div input {
		height: 40px;
		width: 206px;
		padding: 0 10px;
		border: none;
		background: #e1dcd8;
		color: rgb(98, 94, 91);
		box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7),
		inset 0px 2px 5px #aaaaaa;
		border-radius: 5px;
	}
	ul li .user {
		font-family: "Microsoft YaHei UI";
		font-size: 13px;
		position: relative;
		left: 6px;
	}
	ul li .pass {
		font-family: "Microsoft YaHei UI";
		font-size: 13px;
		position: relative;
		left: 6px;
	}
	ul li input:focus {
		outline: none;
		background: #f5f2ef;
	}
	ul .remember {
		font-size: 14px;
		font-family: "Microsoft YaHei UI";
		font-style: bold;
		color: rgb(98, 94, 91);
		position: relative;
	}
	ul .remember input[type="checkbox"] {
		width: 18px;
		height: 18px;
		vertical-align: super;
		margin-right: 12px;
		visibility: hidden;
	}
	.remember label {
		cursor: pointer;
		position: absolute;
		width: 22px;
		height: 22px;
		top: 7px;
		left: 0;
		background: #eee;
		border: 1px solid #cccccc;
		border-radius: 4px;
	}
	.remember label:after {
	            opacity: 0.5;
	            content: '';
	            position: absolute;
	            width: 12px;
	            height: 5px;
	            background: transparent;
	            top: 6px;
	            left: 4px;
	            border: 3px solid #74884a;
	            border-top: none;
	            border-right: none;
	            transform: rotate(-45deg);
	}
	.remember input[type=checkbox]:checked + label:after {
	            opacoty: 1;
	            border-color: darkblue;
	} 
	ul li a {
		font-size: 18px;
		position:absolute;
		right:520px;
		font-family: "Microsoft YaHei UI";
		color: rgb(98, 94, 91);
	}
	ul li a:hover{
		opacity: 0.5 ;
	}
	ul li input[type*="submit"] {
		width: 100%;
		height: 40px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 18px;
		color: #ffffff;
		background:#000000;
		border-radius: 8px;
		border: 1px solid #7d8862;
		box-shadow: 0px 1px 0px rgba(170, 170, 170, 1),
		inset 0px 1px 1px rgba(255, 255, 255, 0.7);
		text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.3),
		0px 0px 0px rgba(255, 255, 255, 0);
	}
	 ul li input[type*="submit"]:hover {
		opacity: 0.7;
	} 
	ul li input[type*="submit"]:active {
		width: 100%;
		height: 40px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 18px;
		color: #ffffff;
		background: -moz-linear-gradient(
				top,
				#607738 0%,
				#7a924a 50%,
				#94aa64);
		border-radius: 8px;	
		box-shadow: 0px -1px 0px rgba(170, 170, 170, 1),
			inset 0px -1px 1px rgba(255, 255, 255, 0.7);
		text-shadow: 0px 1px 0px rgba(000, 000, 000, 0.3),
			0px 0px 0px rgba(255, 255, 255, 0);
	}	